<template>
  <el-container id='container'>
    <el-header>
      <header-panel></header-panel>
    </el-header>
    <el-container style="width: 100%; height: 100%;">
      <el-aside>
        <template-panel></template-panel>
      </el-aside>
      <el-container>
        <el-main style="padding: 0px;">
          <graph-panel></graph-panel>
        </el-main>
        <el-aside width='320px'>
          <property-panel></property-panel>
        </el-aside>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import $ from 'jquery'
import GraphUtil from '@/utils/graph-utils/graphUtil'
import GraphBehavier from '@/utils/graph-utils/graphBehavier'
import HeaderPanel from '../header-panel'
import TemplatePanel from '../template-panel'
import GraphPanel from '../graph-panel'
import PropertyPanel from '../property-panel'

export default {
  name: 'DrawTool',
  components: { HeaderPanel, TemplatePanel, GraphPanel, PropertyPanel },
  data() {
    return {}
  },
  mounted() {
    // const self = this
    // 页面加载后，设置页面的高度为浏览器的高度
    const windowHeight = $(window).height()
    $('#container').height(windowHeight)
    // 主页面挂载后，动态调整graph的大小
    const graph = this.$store.state.graphModule.graph
    // 根据容器的高度，设置graph的高度
    $(window).resize(function() {
      GraphBehavier.resizeGraph(graph)
    })
    window.onbeforeunload = (e) => {
      // 与通常的浏览器不同,会提示给用户一个消息框,
      // 返回非空值将默认取消关闭
      // 建议使用对话框 API 让用户确认关闭应用程序.
      e.returnValue = '您输入的数据可能不会被保存。'
    }

    // 清除图形缓存
    GraphUtil.clearLocalstorageItem()
  },
  unmounted() {
    window.onbeforeunload = null
  }
}
</script>

<style>
.property-container {
  padding: 6px;
}

.x6-widget-stencil-group-content {
  background-color: #333b50;
}

.x6-widget-minimap {
  background-color: #333b50;
}
</style>